<ion-header>
    <ion-toolbar color="light">
        <ion-buttons start >
            <button ion-button icon-only navPop>
                <ion-icon name="arrow-back" ></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>{{ 'more.Profile' | translate }}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <section class="my-content">
        <button ion-item detail-none class="hc-ion-item" (click)="imgSelect()">
            <ion-label color="main">{{ 'more.Addphoto' | translate }}</ion-label>
            <img class="headimg" item-end [src]="userInfo.avatar? src+ userInfo.avatar:'./assets/imgs/login_img.png'" alt="">
        </button>
        <button ion-item class="hc-ion-item" [(navPush)]="emailPage" [(navParams)]="pushData">
            <ion-label color="main">{{ 'more.Email' | translate }}</ion-label>
            <span item-end>{{userInfo.email}}</span>
        </button>
        <button ion-item detail-none class="hc-ion-item" [(navPush)]="namePage" [(navParams)]="pushData">
            <ion-label color="main">{{ 'more.Name' | translate }}</ion-label>
            <span item-end>{{userInfo.firstname}}</span>
        </button>
        <button ion-item detail-none class="hc-ion-item" [(navPush)]="telPage" [(navParams)]="pushData">
            <ion-label color="main">{{ 'more.Tel' | translate }}</ion-label>
            <span item-end>{{userInfo.mobile}}</span>
        </button>
        <button ion-item detail-none class="hc-ion-item" [(navPush)]="addressPage" [(navParams)]="pushData">
            <ion-label color="main">{{ 'more.Address' | translate }}</ion-label>
            <span item-end>{{userInfo.address}}</span>
        </button>
        <button ion-item detail-none class="hc-ion-item" [(navPush)]="nationalityPage" [(navParams)]="pushData">
            <ion-label color="main">{{ 'more.Nationality' | translate }}</ion-label>
            <span item-end>{{userInfo.country}}</span>
        </button>
        <button ion-item class="hc-ion-item">
            <ion-label color="main">{{ 'more.Gender' | translate }}</ion-label>
            <span item-end style="position:relative"><ion-multi-picker style="padding:0;" [(ngModel)] = "userInfo.gender" (ngModelChange)="editGender()" item-content [multiPickerColumns]="dependentColumns_1" doneText="OK"></ion-multi-picker></span>
        </button>
        <button ion-item class="hc-ion-item">
            <ion-label color="main">{{ 'more.Status' | translate }}</ion-label>
            <span item-end style="position:relative"><ion-multi-picker style="padding:0;" [(ngModel)] = "userInfo.type" (ngModelChange)="editStatus()" item-content [multiPickerColumns]="dependentColumns_2" doneText="OK"></ion-multi-picker></span>
        </button>
    </section>
    <section class="media-content">
        <button ion-item class="hc-ion-item" >
            <img class="img" item-start src="./assets/imgs/login_facebook.svg" alt="">
            <ion-label color="main">Facebook</ion-label>
            <span item-end>To link</span>
        </button>
        <button ion-item class="hc-ion-item" >
            <img class="img" item-start src="./assets/imgs/login_instagram.svg" alt="">
            <ion-label color="main">Instafram</ion-label>
            <span item-end>To link</span>
        </button>
        <button ion-item class="hc-ion-item" >
            <img class="img" item-start src="./assets/imgs/login_twitter.svg" alt="">
            <ion-label color="main">Twitter</ion-label>
            <span item-end>To link</span>
        </button>
        <button ion-item class="hc-ion-item" >
            <img class="img" item-start src="./assets/imgs/login_wechat.svg" alt="">
            <ion-label color="main">Wechat</ion-label>
            <span item-end>To link</span>
        </button>
        <button ion-item class="hc-ion-item" >
            <img class="img" item-start src="./assets/imgs/login_google.svg" alt="">
            <ion-label color="main">Google</ion-label>
            <span item-end>To link</span>
        </button>
    </section>
</ion-content>